<div class="tech-doc-table" [busyIf]="primengTableHelper.isLoading">
    <div class="m-portlet" style="margin-top: -15px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
            <div class="m-portlet__head-caption" style="width:100%">
                <div class="m-portlet__head-title">
                    <span class="m-portlet__head-icon">
                        <i class="fa fa-book"></i>
                    </span>
                    <h3 class="m-portlet__head-text">请选择工艺文件</h3>
                </div>
                <div
                    class="form-group m-form__group align-items-center mb-0 col-md-4"
                >
                    <div class="m-input-icon m-input-icon--right">
                        <input
                            type="text"
                            [(ngModel)]="filterText"
                            (keyup.enter)="getTechDoc()"
                            class="form-control m-input m-input--solid"
                            placeholder="Search..."
                        />
                        <span
                            class="m-input-icon__icon m-input-icon__icon--right"
                        >
                            <span (click)="getTechDoc()">
                                <i class="la la-search m--font-brand"></i>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 15px;">
            <!-- <p-table
                [value]="techDocs"
                selectionMode="single"
                [(selection)]="selectedTechDoc"
                dataKey="codeId"
                [scrollable]="true"
                scrollHeight="200px"
                (onRowSelect)="rowSelect()"
            >
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 150px">编号</th>
                        <th style="width: 150px">编者</th>
                        <th style="width: 150px">时间</th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData>
                    <tr [pSelectableRow]="rowData">
                        <td style="width: 150px">
                            {{ rowData.codeId }}
                        </td>
                        <td style="width: 150px">
                            {{ rowData.editor }}
                        </td>
                        <td style="width: 150px">
                            {{ rowData.editTime | momentFormat: 'YYYY-MM-DD' }}
                        </td>
                    </tr>
                </ng-template>
            </p-table> -->
            <p-dataTable
          [value]="techDocs"
          selectionMode="single"
          [(selection)]="selectedTechDoc"
          dataKey="codeId"
          (onRowSelect)="rowSelect($event)"
        >
          <p-column field="codeId" header="编号" [style]="{ width: '33%' }"></p-column>
          <p-column field="editor" header="编者" [style]="{ width: '33%' }"></p-column>
          <p-column field="editTime" header="时间">
            <ng-template let-doc="rowData" pTemplate="body">
              {{ doc.editTime | momentFormat: 'YYYY-MM-DD' }}
            </ng-template>
          </p-column>
        </p-dataTable>
        </div>
    </div>

    <div class="m-portlet" style="margin-top: -30px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <span class="m-portlet__head-icon">
                        <i class="fa fa-database"></i>
                    </span>
                    <h3 class="m-portlet__head-text">材料信息</h3>
                </div>
            </div>
        </div>
        <div style="padding: 15px;">
           
                <table border="1px" style="border:1px solid #c7c7c7; width: 100%;">
                    <tr>
                      <th style="width:13%; height: 30px; text-align:center;">名称</th>
                      <th style="width:25%; text-align:center;">尺寸</th>
                      <th style="width:13%; text-align:center;">规格</th>
                      <th style="width:13%; text-align:center;">数量</th>
                      <th style="width:18%; text-align:center;">备注</th>
                    </tr>
                    <tr *ngFor="let m of material">
                      <th style="text-align:center; height: 30px;">{{ m.name }}</th>
                      <th style="text-align:center;">{{ m.size }}</th>
                      <th style="text-align:center;">{{ m.spec }}</th>
                      <th style="text-align:center;">{{ m.amount }}</th>
                      <th style="text-align:center;">{{ m.remark }}</th>
                    </tr>
                  </table>
      
                  <table border="0px" style="width: 100%;margin-top:20px;">
                    <tr>
                      <th style="width:25%; height: 30px; text-align:center;">全部</th>
                      <th style="width:25%; text-align:center;">牌号</th>
                      <th style="width:25%; text-align:center;">状态</th>
                      <th style="width:25%; text-align:center;">标准</th>
                    </tr>
                    <tr style="background-color: #fff !important;" *ngFor="let m of material">
                      <th style="text-align:center; height: 30px;">{{ m.grade }}</th>
                      <th style="text-align:center;">
                        <input
                          class="form-control m-input m-input--square"
                          type="text"
                          name="newPaiHao"
                          style="border: none; border-bottom: 1px solid #aaa; text-align: center;font-weight: 600;width: 80%;margin: auto;"
                          [(ngModel)]="m.newPaiHao"
                        />
                      </th>
                      <th style="text-align:center;">
                        <input
                          class="form-control m-input m-input--square"
                          type="text"
                          name="newMaterialStatus"
                          style="border: none; border-bottom: 1px solid #aaa; text-align: center;font-weight: 600;width: 80%;margin: auto;"
                          [(ngModel)]="m.newMaterialStatus"
                        />
                      </th>
                      <th style="text-align:center;">
                        <input
                          class="form-control m-input m-input--square"
                          type="text"
                          name="newPaiHaoStandard"
                          style="border: none; border-bottom: 1px solid #aaa; text-align: center;font-weight: 600;width: 80%;margin: auto;"
                          [(ngModel)]="m.newPaiHaoStandard"
                        />
                      </th>
                    </tr>
                  </table>
            
        </div>
    </div>

    <div class="m-portlet" style="margin-top: -30px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
          <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
              <span class="m-portlet__head-icon"> <i class="fa fa-wpforms"></i> </span>
              <h3 class="m-portlet__head-text">设备信息</h3>
            </div>
          </div>
        </div>
        <div class="m-portlet__body" style="padding: 15px;">
          <div>
            <div class="row">
              <div class="col-3" *ngFor="let equip of equips" style="margin-top: 15px;">
                <div style="text-align: center;">{{ equip.spec }}</div>
                <!-- <div>
                  <select
                    class="form-control m-input m-input--square"
                    [name]="square"
                    style="border: none; border-bottom: 1px solid #aaa; text-align: center; text-align-last: center; font-weight: 600;width: 80%;margin: auto;"
                    [(ngModel)]="equip.newSpec"
                  >
                    <option [value]="eq.displayText" *ngFor="let eq of equipments" name="equip.newSpec"> {{ eq.displayText }}</option>
                  </select>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>

    <div class="m-portlet" style="margin: -30px 0px 0px 0px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
            <div class="m-portlet__head-caption">
                <div class="m-portlet__head-title">
                    <span class="m-portlet__head-icon">
                        <i class="fa fa-cubes"></i>
                    </span>
                    <h3 class="m-portlet__head-text">
                        工序
                        <small style="float: right;"> 额定工时 </small>
                    </h3>
                </div>
            </div>
        </div>
        <div class="m-portlet__body" style="padding: 15px;">
            <div class="m-widget4 m-widget4--chart-bottom row">
                <div
                    class="m-widget4__item col-4"
                    *ngFor="let proc of procs"
                    style="cursor: pointer;"
                    [class.selected-div]="proc.sequenceNumber == isSelected"
                    (click)="onChange(proc.sequenceNumber)"
                >
                    <div class="m-widget4__img" style="width: 25px;">
                        <i
                            class="fa fa-angle-right blod m--font-success"
                            style="font-size: 18px;"
                            >{{ proc.sequenceNumber }}</i
                        >
                    </div>
                    <div class="m-widget4__info" style="width: 60%;">
                        <span class="m-widget4__text">
                            <div class="blod" style="font-size: 16px;">
                                {{ proc.name }}
                            </div>
                        </span>
                    </div>
                    <span class="m-widget4__img">
                        <span class="m-widget4__text"
                            >{{ proc.chunk }} 小时
                        </span>
                    </span>
                </div>
            </div>
        </div>

        <div class="m-portlet__foot">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <button
                        type="button"
                        class="btn btn-sm btn-success float-right"
                        (click)="save()"
                        [disabled]="!selectedTechDoc?.codeId"
                        [buttonBusy]="saving"
                        [busyText]="'绑定中...'"
                    >
                        <i class="fa fa-check-circle"></i>
                        <span>绑定工艺规程</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
